<!-- 首页：统计卡片 -->
<template>
	<el-row :gutter="20" class="home-statistic-cards">
		<el-col :span="4">
			<el-card>
				<el-statistic title="在建项目" :value="36">
					<template #suffix>
						<el-icon :size="16" style="vertical-align: -0.125em">
							<OfficeBuilding />
						</el-icon>
					</template>
				</el-statistic>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card>
				<el-statistic title="已完成项目" :value="118">
					<template #suffix>
						<el-icon :size="16" style="vertical-align: -0.125em">
							<CircleCheck />
						</el-icon>
					</template>
				</el-statistic>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card>
				<el-statistic title="超期项目" :value="67">
					<template #suffix>
						<el-icon :size="16" style="vertical-align: -0.125em">
							<Cloudy />
						</el-icon>
					</template>
				</el-statistic>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card>
				<el-statistic title="已关闭项目" :value="12">
					<template #suffix>
						<el-icon :size="16" style="vertical-align: -0.125em">
							<FolderDelete />
						</el-icon>
					</template>
				</el-statistic>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card>
				<el-statistic title="打开的问题" :value="228">
					<template #suffix>
						<el-icon :size="16" style="vertical-align: -0.125em">
							<FolderOpened />
						</el-icon>
					</template>
				</el-statistic>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card class="warning">
				<el-statistic title="风险点" :value="28">
					<template #suffix>
						<el-icon :size="16" style="vertical-align: -0.125em">
							<Warning />
						</el-icon>
					</template>
				</el-statistic>
			</el-card>
		</el-col>
	</el-row>
</template>
<style lang="scss">
.home-statistic-cards {
	.el-card {
		cursor: pointer;
		transition: all 0.3s ease-in-out;
		&:hover {
			transform: scale3d(1.01, 1.01, 1.01);
		}
		.el-statistic {
			text-align: center;
			font-size: 16px;
		}
	}
}
</style>
